<template>
  <div class="registration-form">
    <el-card class="form-card">
      <el-form ref="registrationForm" :model="formData" :rules="formRules" label-width="80px">
        <el-form-item label="园所名称" prop="gardenName" >
          <el-input v-model="formData.gardenName" disabled></el-input>
        </el-form-item>
        <el-form-item label="学生姓名" prop="studentName">
          <el-input v-model="formData.studentName"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="formData.idCard"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="formData.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="籍贯" prop="nativePlace">
          <el-input v-model="formData.nativePlace"></el-input>
        </el-form-item>
        <!-- 添加更多表单项 -->
        <el-form-item label="联系人" prop="contact">
          <el-input v-model="formData.contact"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="formData.phone"></el-input>
        </el-form-item>
        <el-form-item label="家庭住址" prop="address">
          <el-input v-model="formData.address"></el-input>
        </el-form-item>
        <el-form-item label="民族" prop="ethnicity">
          <el-input v-model="formData.ethnicity"></el-input>
        </el-form-item>
        <!-- 结束更多表单项 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="viewResults">查看报名结果</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        gardenName: '',
        studentName: '',
        idCard: '',
        gender: '',
        nativePlace: '',
        contact: '', // 新增联系人
        phone: '', // 新增手机号
        address: '', // 新增家庭住址
        ethnicity: '', // 新增民族
      },
      formRules: {
        gardenName: [{ required: true, message: '请输入园所名称', trigger: 'blur' }],
        studentName: [{ required: true, message: '请输入学生姓名', trigger: 'blur' }],
        idCard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        nativePlace: [{ required: true, message: '请输入籍贯', trigger: 'blur' }],
        // 添加新的验证规则
        contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        address: [{ required: true, message: '请输入家庭住址', trigger: 'blur' }],
        ethnicity: [{ required: true, message: '请输入民族', trigger: 'blur' }],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.registrationForm.validate((valid) => {
        if (valid) {
          // 处理表单提交逻辑
          console.log('提交表单', this.formData);
          // 弹出提交成功提示
          this.$message.success('提交成功');
        } else {
          // 表单验证不通过时的处理
          this.$message.error('请按要求填写表单');
        }
      });
    },
    viewResults() {
      // 处理查看报名结果逻辑
      console.log('查看报名结果');
    },
  },
  created() {
    // 从路由参数中获取schoolName
    const schoolName = this.$route.query.schoolName;
    if (schoolName) {
      // 设置到表单数据中
      this.formData.gardenName = schoolName;
    }
  },
};
</script>

<style scoped>
.registration-form {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.form-card {
  width: 400px;
  border-radius: 10px;
  padding: 20px;
}
</style>
